﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<UserProfileViewModel>" %>
<%@ Import Namespace="Stimulus360.Controllers.Users" %>
<%@ Import Namespace="Stimulus360.Models.Data" %>

<asp:Content ID="EditUserContent" ContentPlaceHolderID="MainContent" runat="server">

    <div class="mainInner fullViewHdr pt10">
	    <div class="pb10"><h3>Edit User Profile</h3></div>
	    <div class="errorMessages mb10"><%= Html.ValidationSummary(Stimulus360.Resources.Stimulus360.ValidationSummary_MandatoryDetails )%></div>
        <% using (Html.BeginForm())
           {
                %>
       <%=Html.AntiForgeryToken()%>
       <div class="NewUrsLeft floatLeft">
       <div>
        <div class="floatLeft proflPic">
           <img id="imgThumb" src="/Users/UserImage/<%=Model.User.UserName + "?" +  DateTime.Now %>"  alt="User Image" />
          <div class="proflPictext">
            <a id="lnkChange" href="javascript:void(0);">Change Photo</a>
          </div>
        </div>
        <div class="floatLeft mt10 pl10 pb20">
          <div class="pb5"><strong>First Name</strong></div>
            <div class="pb10">
                <%= Html.TextBox("FirstName", Model.User.FirstName, new { @size = "48", @maxlength = "50" })%>
                <%= Html.ValidationMessage("FirstName", "*", new { @class = "requiredfield" })%>
            </div>	
            <div class="pb5"><strong>Last Name</strong></div>
            <div><%= Html.TextBox("LastName", Model.User.LastName, new { @size = "48", @maxlength = "50" })%></div>	
        </div>
        <br clear="all" />
        </div>
        <!-- Upload Div Start -->           
        <div>
            <div id="divUpload" class="proflImgUpload p10" style="display:none;">
                <div class="floatLeft"><strong>Upload Photo</strong></div><div class="note floatLeft pl10">Allowed Formats: (bmp, jpeg, jpg, gif, png) </div>
                    <input type="file" size="40" onchange="checkExtension(this);" id="userFileUpload" name="userFileUpload" />
                <div id="divFileUpload"></div>                               
                <div  class="pt10">
                    <input id="btn-upload" class="uploadImg" type="button" value="Upload" />&nbsp;&nbsp;
                    <input id="btnCancel" class="uploadCancel" type="button" value="Cancel" />
                </div>
            </div>
        <br clear="all" />
        </div>
        <!-- Upload Div End -->        
        
        <div class="pt10 pl10 pb5"><strong>About</strong> (Short personal bio)</div>
        <div class="pl10"><%= Html.TextArea("Bio", Model.User.Bio, new { @cols = "60", @rows = "5" })%></div>
        <div class="pt10 pl10 pb5"><h2>My Interests</h2></div>
        <div class="pt10 pl10 pb5">
          <%Html.RenderPartial("MyInterest", Model.InvestmentCategories); %>
          <div style="display:none"><%=Html.Hidden("interests")%></div>          
        </div>
        
      </div>	
      
      <div class="NewUrsRight floatLeft">
        <div class="pt10 pl10 pb5"><strong>Community Alias</strong> (primary user id)</div>
            <div class="pl10"><%= Html.TextBox("UserName", Model.User.UserName, new { @size = "40",  @maxlength = "10", @readonly = "readonly" })%>
            <%= Html.ValidationMessage("UserName", "*", new { @class = "requiredfield" })%></div>
        <div class="pt10 pl10 pb5"><strong>Email Address</strong> (alternate user id)</div>
            <div class="pl10"><%= Html.TextBox("Email", Model.User.Email, new { @size = "40", @maxlength = "255" })%>
            <%= Html.ValidationMessage("Email", "*", new { @class = "requiredfield" })%>
            </div>	
        <div class="pt10 pl10 pb5"><strong>Old Password</strong> <span class="note">(Min 6 Characters)</span></div>
            <div class="pl10"><%= Html.Password("OldPassword", Model.User.OldPassword , new { @size = "40", @maxlength = "26" })%>
            <%= Html.ValidationMessage("OldPassword", "*", new { @class = "requiredfield" })%></div>	    
        <div class="pt10 pl10 pb5"><strong>New Password</strong> <span class="note">(Min 6 Characters)</span></div>
            <div class="pl10"><%= Html.Password("Password", Model.User.Password, new { @size = "40", @maxlength = "26" })%>
            <%= Html.ValidationMessage("Password", "*", new { @class = "requiredfield" })%></div>	
        <div class="pt10 pl10 pb5"><strong>Confirm Password</strong> <span class="note">(Min 6 Characters)</span></div>
        <div class="pl10"><%= Html.Password("ConfirmPassword", Model.User.ConfirmPassword, new { @size = "40", @maxlength = "26" })%>
            <%= Html.ValidationMessage("ConfirmPassword", "*", new { @class = "requiredfield" })%>
        </div>        
     </div>
        <br clear="all" />
        <br />
    <div class="buttons pl10">
    <input name="submit" type="submit" class="btTxt submit" id="saveForm" value="Save" />
    &nbsp;
    <input name="Cancel" type="button" class="btTxt submit" id="cancelForm" value="Cancel" />
    </div>
    
    <%}  %>    
    <br />
    <!-- Main Area End -->
    </div>
    


<div style="display:none"><%=Html.Hidden("isFileValid","false") %>
<%=Html.Hidden("categoryIds", Model.CategoryIds) %>
</div> 
  <script language="javascript" type="text/javascript">

      $(document).ready(function() {
          var categoryIds = $("#categoryIds").val().split('|');
          for (var intLoop = 0; intLoop < categoryIds.length - 1; intLoop++) {
              var newId = "#spancategory" + categoryIds[intLoop];
              $("#spancategory" + categoryIds[intLoop]).addClass("tagSelected");
          }

          $("#lnkChange").click(function() {
              $("#divUpload").slideToggle("fast");
          });

          $("#btnCancel").click(function() {
              $("#divUpload").slideToggle("fast");
          });

          $("#cancelForm").click(function() {
              window.location = "/Users/" + "<%=Model.User.UserName %>";
          });

          $("#btn-upload").click(function() {
              if ($("#isFileValid").val() != "false") {
                  DisplayPhoto();
              }
              else {
                  return false;
              }
          });

          function DisplayPhoto() {
              $.ajaxFileUpload({
                  url: '/Users/SaveImage/' + '<%= Model.User.UserName %>',
                  secureuri: false,
                  fileElementId: 'userFileUpload',
                  dataType: '',
                  beforeSend: function() { },
                  complete: function() { },
                  success: function(data, status) {
                      $("#divUpload").slideToggle("fast");
                      $("#imgThumb").attr("src", "/Users/UserImage/" + '<%= Model.User.UserName %>' + "?" + Date());
                  },
                  error: function(data, status, e) { }
              });
              return false;
          }

          $("#saveForm").click(function() {
              var categoryIds = "";
              $("#interests").val("");
              $('span.tagSelected').each(function() {
                  var data = $(this).metadata();
                  categoryIds = categoryIds + data.CategoryId + ",";
                  $("#interests").val($("#interests").val() + $(this).text() + ",");
              });
              $("#interests").val($("#interests").val() + "?" + categoryIds);
          });
      });

      function validFileName(str) {
          str = str.replace(/^\s|\s$/g, ""); //trims string
          return /^[a-z$_@%#!&~()`!\s\-][\w$_@%#!&~()`!\s\-]+\.(bmp|jpeg|jpg|gif|png)$/i.test(str);
      }

      function checkExtension(ctrl) {
          var file = ctrl.value;
          var type = "";
          var browser = navigator.appName;
          var fileLength;
          var ext = file.slice(file.lastIndexOf(".")).toLowerCase();
          
          if (browser == "Microsoft Internet Explorer") {
              type = file.slice(file.indexOf("\\") + 1);
              fileLength = file.slice(file.lastIndexOf("\\")).toLowerCase().length - ext.length;
              var fileName = file.slice(file.lastIndexOf("\\")).toLowerCase();
              fileName = fileName.substring(1, fileName.length)
          }
          else if (browser == "Netscape") {
              fileName = file;
              fileLength = fileName.length - ext.length;
          }
          
          if (fileLength <= 1000) {
              if (validFileName(fileName)) {
                  $("#isFileValid").val("true");
                  $("#divFileUpload").html("");
              }
              else {
                  $("#isFileValid").val("false");
                  $("#userFileUpload").val("");
                  $("#divFileUpload").html("").append("<div class='requiredfield'>Please enter valid file name</div>");
              }
          }
          else {
              $("#isFileValid").val("false");
              $("#userFileUpload").val("");
              $("#divFileUpload").html("").append("<div class='requiredfield'>Please check file name length</div>");
          }
      }
        
    </script>

</asp:Content>
